<template>
    <div class="dicgood">
        <van-nav-bar title="选择委托商品" left-text="" right-text="" left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon name="cross" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>
        <div style="margin-top: 30px;">
            <div class="user-order" v-for="(item, index) in list" :key="index">
                <div style="margin-left: 10px;display: flex;">
                    <van-checkbox-group v-model="item.checkbox" style="padding-top: 45px;">
                        <van-checkbox :name="item.id" style="margin-left: 10px;margin-top: 10px;"
                            checked-color="#389138"></van-checkbox>
                    </van-checkbox-group>
                    <img :src="item.good.image" alt="" srcset=""
                        style="width: 90px;height: 90px;border-radius: 8px;margin-left: 22px;margin-top: 20px;">
                    <div style="margin-left: 12px;font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #151515;height: 40px;line-height: 20px;width: 220px;    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;margin-top: 20px;">
                        {{ item.good.name }}</div>
                    <div style="display: flex;margin-top:70px;">
                        <div
                            style="font-family: MiSans, MiSans;font-size: 16px;color: #666666;position: absolute;float: left;left: 180px;">
                            我的价格 
                        </div>
                        <div style="color: #666666;position: absolute;float: right;right: 20px;">{{item.price}}</div>
                    </div>
                    <div style="display: flex;margin-top:90px;">
                        <div
                            style="font-family: MiSans, MiSans;font-size: 16px;color: #666666;position: absolute;float: left;left: 180px;">
                            售卖价格
                        </div>
                        <div style="color: #666666;position: absolute;float: right;right: 20px;">{{item.trust_price}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-top: 40px;">
            <van-button
                style="width: 234px;height: 30px;border-radius: 100px;text-align: center;font-size: 15px;background-color: #389138;height: 44px;margin-left: 70px;color: #fff"
                @click="yijianweituo2">确认委托</van-button>
        </div>
    </div>
</template>

<script>
import { getStore, store_trust,getTrust } from '@/api/user'



export default {
    name: 'User',
    components: {

    },
    data() {
        return {

            checkbox: "",
            list: [],
            activeIndex:""
        };
    },
    created() {
        this.activeIndex = this.$route.query.activeIndex
        this.getArticle()
    },
    methods: {
        getArticle() {

            store_trust().then((res) => {
                this.list = res.data


            })
        },
        yijianweituo2(){
        
            let orderIdArr = []
            for (let i = 0; i < this.list.length; i++) {
                if (this.list[i].checkbox && this.list[i].checkbox.length > 0) {
                    orderIdArr.push(this.list[i].checkbox[0])
                }

            }

            if (orderIdArr.length == 0) {
                Toast("请选中要委托的商品")
                return
            }
            let obj={
                ids:orderIdArr.join(",")
            }
            getTrust(obj).then((res)=>{
                Toast(res.msg)
                this.$route.params.active = this.activeIndex
                this.$router.back()
            })
        },
        onClickLeft() {
            this.$route.params.active = this.activeIndex
            this.$router.back()
        }
    },
    computed: {

    }
}
</script>

<style scoped lang="scss">
.user-order {
    width: 702px;
    height: 260px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px !important;
    margin-top: 42px;
    background-color: #fff;
}

.dicgood {
    background: #f5f5f5 !important;
}
</style>
